<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>产品分类页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/category.css">
</head>
<body>
<!-- 顶部通栏 -->
<header class="jd_topBar">
    <a href="javascript:;" class="icon_back"></a>
    <form action="">
        <input type="text">
    </form>
    <a href="javascript:;" class="icon_menu"></a>
</header>
<!-- 分类主体 -->
<main class="jd_category">
    <div class="jd_category_left">
        <ul>
            <li class=""><a href="javascript:;">热门推荐</a></li>
            <li class="now"><a href="javascript:;">潮流女装</a></li>
            <li class=""><a href="javascript:;">品牌男装</a></li>
            <li class=""><a href="javascript:;">内衣配饰</a></li>
            <li class=""><a href="javascript:;">家用电器</a></li>
            <li class=""><a href="javascript:;">电脑办公</a></li>
            <li class=""><a href="javascript:;">手机数码</a></li>
            <li class=""><a href="javascript:;">母婴频道</a></li>
            <li class=""><a href="javascript:;">图书</a></li>
            <li class=""><a href="javascript:;">家居家纺</a></li>
            <li class=""><a href="javascript:;">居家生活</a></li>
            <li class=""><a href="javascript:;">家具建材</a></li>
            <li class=""><a href="javascript:;">热门推荐</a></li>
            <li class=""><a href="javascript:;">潮流女装</a></li>
            <li class=""><a href="javascript:;">品牌男装</a></li>
            <li class=""><a href="javascript:;">内衣配饰</a></li>
            <li class=""><a href="javascript:;">家用电器</a></li>
            <li class=""><a href="javascript:;">电脑办公</a></li>
            <li class=""><a href="javascript:;">手机数码</a></li>
            <li class=""><a href="javascript:;">母婴频道</a></li>
            <li class=""><a href="javascript:;">图书</a></li>
            <li class=""><a href="javascript:;">家居家纺</a></li>
            <li class=""><a href="javascript:;">居家生活</a></li>
            <li class=""><a href="javascript:;">家具建材</a></li>
        </ul>
    </div>
    <div class="jd_category_right">
        <div class="jd_category_right_con">
            <a href="javascript:;" class="jd_adv">
                <img src="images/banner_1.jpg" alt="">
            </a>
            <div class="jd_hot">
                <h3>推荐品牌</h3>
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">
                            <img src="images/ochirly.jpg" alt="">
                            <span>欧时力</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/five.jpg" alt="">
                            <span>Five Plus</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/moco.jpg" alt="">
                            <span>MO&Co.</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/vero.jpg" alt="">
                            <span>VERO MODA</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/only.jpg" alt="">
                            <span>ONLY</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/etam.jpg" alt="">
                            <span>艾格</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/peace.jpg" alt="">
                            <span>太平鸟</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/eifni.jpg" alt="">
                            <span>伊芙丽</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/girdear.jpg" alt="">
                            <span>哥弟</span>
                        </a>
                    </li>
                </ul>
                <h3 class="jd_hot_h3">热卖品类</h3>
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_women.jpg" alt="">
                            <span>连衣裙</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_child.jpg" alt="">
                            <span>短袖T恤</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_top.jpg" alt="">
                            <span>短袖雪纺衫</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_shirt.jpg" alt="">
                            <span>短袖衬衫</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_short.jpg" alt="">
                            <span>阔腿裤</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_bottom.jpg" alt="">
                            <span>牛仔短裤</span>
                        </a>
                    </li>
                </ul>
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">
                            <img src="images/ochirly.jpg" alt="">
                            <span>欧时力</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/five.jpg" alt="">
                            <span>Five Plus</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/moco.jpg" alt="">
                            <span>MO&Co.</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/vero.jpg" alt="">
                            <span>VERO MODA</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/only.jpg" alt="">
                            <span>ONLY</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/etam.jpg" alt="">
                            <span>艾格</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/peace.jpg" alt="">
                            <span>太平鸟</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/eifni.jpg" alt="">
                            <span>伊芙丽</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/girdear.jpg" alt="">
                            <span>哥弟</span>
                        </a>
                    </li>
                </ul>
                <h3 class="jd_hot_h3">热卖品类</h3>
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_women.jpg" alt="">
                            <span>连衣裙</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_child.jpg" alt="">
                            <span>短袖T恤</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_top.jpg" alt="">
                            <span>短袖雪纺衫</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_shirt.jpg" alt="">
                            <span>短袖衬衫</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_short.jpg" alt="">
                            <span>阔腿裤</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/nf_bottom.jpg" alt="">
                            <span>牛仔短裤</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</main>

<script src="./js/common.js"></script>
<script src="./js/category.js"></script>
</body>
</html>